<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="js/jquery-3.7.1.js"></script>

    <p id="gg">好好学习，天天向上</p>

    <!-- 第三：使用 JQ -->
     <script>
        // $() ：工厂方法 - 选择页面要操作的节点 - 选择器
        // 返回的是 JQuery 对象 ，区别原生的 JavaScript 对象
        // 只要是对象，必须存在相关的属性和方法
        // 注意：在JavaScript中，函数也是一个数据
 
        // 第一：选择要操作的节点 - 对象（属性和方法）
        // 注意：在 JavaScript 中，HTML的任何的内容都是节点
        var pNode = document.getElementById("gg") ;

        // 第二：操作 - 通过节点对象的属性和方法进行相关的操作
        // pNode.style.color = "red" ;

        // jquery对象 = $(原生JavaScript对象)
        var jQueryNode = $(pNode);
        jQueryNode.css("color","green")
            .css("font-weight","bold");
 
     </script>
</head>
<body>
    <h1>你好，JQuery</h1>

</body>
</html>